<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/topLogo.css"/>
		<style>
			.mui-input-group {
				text-align: center;
				width: 90%;
				margin: 0 5%;
			}
			
			.mui-input-row {
				position: relative;
			}
			
			.mui-input-row i.iconfont.icon {
				display: inline-block;
				width: 10%;
				color: #F6047F;
			}
			
			.mui-input-row i.iconfont.check {
				display: none;
				color: #FF0000;
				position: absolute;
				right: 30px;
				top: 12px;
			}
			
			.mui-input-row input {
				display: inline-block;
				width: 80%;
				border-bottom: 1px solid #efeff4;
			}
			
			.mui-input-row input:focus {
				border-color: #FEB406;
			}
			
			.send {
				position: absolute;
				right: 12px;
				width: 100px;
				height: 30px;
				margin: 5px;
				font-size: medium;
				text-align: center;
				vertical-align: middle;
				display: inline;
				line-height: 2px;
				background-color: #FEB406;
			}
			
			.mui-content-padded {
				margin-top: 30px;
			}
			
			.mui-input-group:after,
			.mui-input-group:before,
			.mui-input-row:after {
				display: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bar-inverse">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">欢迎注册</h1>
		</header>
		<div class="mui-content">
			<div class="infoTop"></div>
			<div class="infoButtom"></div>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<i class="iconfont icon">&#xe625;</i>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="账号（至少 5 个字符）">
					<i class="iconfont check">&#xe656;</i>
				</div>
				<div class="mui-input-row">
					<i class="iconfont icon">&#xe670;</i>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="密码（至少 6 个字符）">
					<i class="iconfont check">&#xe656;</i>
				</div>
				<div class="mui-input-row">
					<i class="iconfont icon">&#xe670;</i>
					<input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="确认密码">
					<i class="iconfont check">&#xe656;</i>
				</div>
				<div class="mui-input-row">
					<i class="iconfont icon">&#xe648;</i>
					<input id='telphone' type="number" class="mui-input-clear mui-input" placeholder="手机号码">
					<i class="iconfont check">&#xe656;</i>
				</div>
				<div class="mui-input-row">
					<i class="iconfont icon">&#xe60c;</i>
					<input id='checkNum' type="number" class="mui-input" placeholder="验证码" maxlength="6">
					<button id='checkP' type="button" class="mui-btn-red send">获取验证码</button>
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn btn-block btn-main" data-loading-text = "注册中">注册</button>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var accountBox = document.getElementById('account'); // 用户名
			var passwordBox = document.getElementById('password'); // 密码
			var passwordConfirmBox = document.getElementById('password_confirm'); // 密码确认
			var telphone = document.getElementById('telphone'); // 手机号
			var checkP = document.getElementById("checkP"); // 获取验证码
			var checkNum = document.getElementById("checkNum"); // 验证码
			var regButton = document.getElementById('reg'); // 注册
			var interTime = 60; // 验证码计时器
			var timer;
			mui.plusReady(function() {
				//用户名校验
				accountBox.addEventListener('blur', function() {
					if(/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(accountBox.value)) {
						var url = baseURL + "user/verifyUserName/" + accountBox.value + ".json";
						console.log(url);
						Common.ajax({
							url : url
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								mui.toast('用户名可用');
							} else {  // 用户名不可用重填
								accountBox.focus();
								accountBox.value = '';
								mui.toast('用户名已被注册');
							}
							$(accountBox).siblings('i.check').hide();
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						accountBox.focus();
						accountBox.value = '';
						mui.toast('用户名格式不正确');
						$(accountBox).siblings('i.check').show();
					}
				})
				
				//密码校验
				passwordBox.addEventListener('blur', function() {
					if(passwordBox.value) { // 有值则校验
						if(passwordBox.value.length < 6) { // 少于六位重填
							passwordBox.focus();
							mui.toast('密码最短需要 6 个字符');
							$(passwordBox).siblings('i.check').show();
						} else {
							$(passwordBox).siblings('i.check').hide();
							if(passwordConfirmBox.value) { // 先填确认密码后填密码
								if(passwordConfirmBox.value != passwordBox.value) {
									$(passwordBox).siblings('i.check').show();
									mui.toast('两次输入的密码不一致');
									passwordConfirmBox.focus();
									passwordConfirmBox.value = '';
								} else {
									$(passwordBox).siblings('i.check').hide();
								}
							} else {
								$(passwordBox).siblings('i.check').hide();
							}
						}
					}
				})
				
				//密码确认校验
				passwordConfirmBox.addEventListener('blur', function() {
					if(passwordConfirmBox.value) { // 有值则校验
						if(passwordConfirmBox.value.length < 6) { // 少于六位重填
							passwordConfirmBox.focus();
							mui.toast('密码最短需要 6 个字符');
							$(passwordConfirmBox).siblings('i.check').show();
						} else {
							$(passwordConfirmBox).siblings('i.check').hide();
							if(passwordBox.value) {
								if(passwordConfirmBox.value != passwordBox.value) {
									$(passwordConfirmBox).siblings('i.check').show();
									mui.toast('两次输入的密码不一致');
									passwordConfirmBox.focus();
									passwordConfirmBox.value = '';
								} else {
									$(passwordConfirmBox).siblings('i.check').hide();
								}
							} else {
								$(passwordConfirmBox).siblings('i.check').hide();
							}
						}
					}
				});
				
				//手机号校验
				telphone.addEventListener('blur', function() {
					if(/^1[34578]\d{9}$/.test(telphone.value)) {
						var url = baseURL + "user/verifyMobile/" + telphone.value + ".json";
						console.log(url);
						Common.ajax({
							url : url
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								$(telphone).siblings('i.check').hide();
								mui.toast('手机号可用');
							} else {
								$(telphone).siblings('i.check').show();
								mui.toast('手机号已被注册');
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						telphone.focus();
						$(telphone).siblings('i.check').show();
						mui.toast('手机号格式不正确');
					}
				});
				
				// 获取验证码
				mui('.mui-input-row').on('tap', '#checkP', function() {
					telphone.blur();
					var allRight = true;
					$("#account,#password,#password_confirm,#telphone").each(function() {
						if(!$(this).val() || $(this).siblings('i.check').is(':visible')) {
							allRight = false;
						}
					})
					if(allRight) { //请求验证码
						var url = baseURL + "user/sendSMS/" + telphone.value + ".json";
						console.log(url);
						Common.ajax({
							url : url
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								mui.toast("验证码请求成功");
								//并显示验证码输入倒计时
								interTime = 60;
								checkP.disabled = "disabled";
								timer = setInterval(drawClock, 1000); //设置定时器，让时钟运转起来
							} else {
								mui.toast("验证码请求失败", 1, isReg);
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						mui.toast('信息填写不完整');
					}
				})
				
				// 验证码校验
				checkNum.addEventListener('blur', function() {
					if(!/\d{6}/.test(checkNum.value)) {
						mui.toast('验证码格式不正确');
						checkNum.value = '';
						checkNum.focus();
					}
				});

				// 注册
				mui('.mui-content-padded').on('tap', '#reg', function() {
					var self = this;
					$("input").blur();
					var allRight = true;
					$("input").each(function() {
						if(!$(this).val() || $(this).siblings('i.check').is(':visible')) {
							allRight = false;
						}
					})
					if(allRight) {
						mui(self).button('loading');
						var url = baseURL + "user/regist.json?userName=";
						url += accountBox.value + '&password=';
						url += passwordBox.value + '&mobile=';
						url += telphone.value + '&code=';
						url += checkNum.value + '&cid=';
						url += 123;
						console.log(url);
						Common.ajax({
							url : url
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								mui(self).button('reset');
								mui.toast('注册成功');
								mui.back();
							} else {
								switch (data.code){
									case -1:
										mui.toast('注册失败，用户名不符合规范');
										break;
									case -2:
										mui.toast('注册失败，手机号不符合规范');
										break;
									case -3:
										mui.toast('注册失败，密码不符合规范');
										break;
									case -4:
										mui.toast('注册失败，手机号不符合规范');
										break;
									case -5:
										mui.toast('注册失败，用户名不符合规范');
										break;
									case -6:
										mui.toast('注册失败，验证码错误');	
										break;
									default:
										break;
								}
								mui(self).button('reset');
								clearInterval(timer);
								checkP.disabled = "";
								checkP.innerHTML = "获取验证码";
							}
						}, function(xhr) {
							mui(self).button('reset');
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						mui.toast('信息填写不完整');
					}
				})

				// 验证码计时器
				function drawClock() {
					if(interTime == 0) {
						clearInterval(timer);
						checkP.disabled = "";
						checkP.innerHTML = "获取验证码";
					} else {
						interTime--;
						checkP.innerHTML = interTime + "秒";
					}
				}
			});
		</script>
	</body>

</html>